[data-scope='hover-card'][data-part='trigger'] {
  text-decoration: none;
}

[data-scope='hover-card'][data-part='content'] {
  padding: 0.5rem;
  border: 1px solid lightgray;
  background: white;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.15));
}

[data-scope='hover-card'][data-part='arrow'] {
  --arrow-background: white;
  --arrow-size: 8px;
}

[data-scope='hover-card'][data-part='content'][data-state='open'] {
  animation: fadeIn 0.25s ease-out;
}

[data-scope='hover-card'][data-part='content'][data-state='closed'] {
  animation: fadeOut 0.2s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
